<template>
  <div>
    <div v-if="!pay_sn">
      <van-nav-bar title="收银台"
                   left-text="返回"
                   left-arrow
                   @click-left="onClickLeft" />
      <div class="price">
        {{price}}
      </div>
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell v-for="(item, index) in list"
                    clickable
                    :key="item"
                    :title="item"
                    @click="toggle(index)">
            <template #right-icon>
              <van-checkbox :name="item"
                            ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <div class="btn_wrap">
        <van-button round
                    block
                    type="primary"
                    @click="getPay">微信支付</van-button>
      </div>
    </div>
    <div v-if="pay_sn">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { choosPayApi } from '../../api/pay'
export default {
  data () {
    return {
      list: ['支付宝', '微信'],
      result: [],
      ids: "",//购物车id
      price: 0,
      pay_sn: ""
    }
  },
  created () {
    this.ids = this.$route.params.ids;//购物车id
    this.price = this.$route.params.price
  },
  methods: {
    onClickLeft () { },
    toggle (index) {
      this.$refs.checkboxes[index].toggle();
    },
    async getPay () { //获取支付标识
      var res = await choosPayApi({
        userid: "956519",
        cart_id: this.ids, //购物车id
        addr_id: 0,
        use_balance: 0,
        use_integral: 0,
        is_pei: 0,
        pf: 1
      })
      console.log(res)
      this.pay_sn = res.data.pay_sn;//存储支付签名
      this.$router.push({
        name: "pay",
        params: { pay_sn: this.pay_sn }
      })
    }
  }
}
</script>
<style lang="less">
.price {
  width: 100%;
  height: 300px;
  line-height: 300px;
  font-size: 40px;
  color: red;
  text-align: center;
}
.btn_wrap {
  width: 70%;
  margin: 20px auto;
}
</style>